<template>
  <el-dialog
    class="nodeHyperlinkDialog"
    title="超链接"
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '50%'"
    :top="isMobile ? '20px' : '15vh'"
  >
    <div class="item">
      <span class="name">链接</span>
      <el-input v-model="link" placeholder="http://xxxx.com/" @keyup.stop @keydown.stop @blur="handleUrl()">
        <el-select v-model="protocol" style="width: 80px">
          <el-option label="https" value="https" />
          <el-option label="http" value="http" />
          <el-option label="无" value="none" />
        </el-select>
      </el-input>
    </div>
    <div class="item">
      <span class="name">名称</span>
      <el-input v-model="linkTitle" @keyup.stop @keydown.stop />
    </div>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { isMobile } from "simple-mind-map/src/utils/index"

/**
 * @Desc: 节点超链接内容设置
 */
export default {
  name: "NodeHyperlink",
  data() {
    return {
      dialogVisible: false,
      link: "",
      linkTitle: "",
      activeNodes: [],
      protocol: "https",
      isMobile: isMobile()
    }
  },
  created() {
    this.$bus.$on("node_active", this.handleNodeActive)
    this.$bus.$on("showNodeLink", this.handleShowNodeLink)
  },
  beforeUnmount() {
    this.$bus.$off("node_active", this.handleNodeActive)
    this.$bus.$off("showNodeLink", this.handleShowNodeLink)
  },
  methods: {
    handleNodeActive(args) {
      if (args) {
        this.activeNodes = [...args[1]]
        if (this.activeNodes.length > 0) {
          const firstNode = this.activeNodes[0]
          this.link = firstNode.getData("hyperlink") || ""
          this.handleUrl(true)
          this.linkTitle = firstNode.getData("hyperlinkTitle") || ""
        } else {
          this.link = ""
          this.linkTitle = ""
        }
      } else {
        this.activeNodes = []
      }
    },

    removeProtocol(url) {
      return url.replace(/^https?:\/\//, "")
    },

    handleUrl(setProtocolNoneIfNotExist) {
      const res = this.link.match(/^(https?):\/\//)
      if (res && res[1]) {
        this.protocol = res[1]
      } else if (!this.link) {
        this.protocol = "https"
      } else if (setProtocolNoneIfNotExist) {
        this.protocol = "none"
      }
      this.link = this.removeProtocol(this.link)
    },

    handleShowNodeLink() {
      this.dialogVisible = true
    },

    /**
     * @Desc: 取消
     */
    cancel() {
      this.dialogVisible = false
    },

    /**
     * @Desc:  确定
     */
    confirm() {
      this.activeNodes.forEach((node) => {
        node.setHyperlink((this.protocol === "none" ? "" : this.protocol + "://") + this.link, this.linkTitle)
        this.cancel()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.nodeHyperlinkDialog {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .name {
      display: block;
      width: 50px;
    }
  }
}
</style>
